:root{
  --bg:#ffffff;
  --panel:#ffffff;
  --text:#111827;
  --muted:#6b7280;
  --primary:#667eea;
  --border:#e5e7eb;
  --shadow:0 8px 24px rgba(0,0,0,.12);
}

/* 屏幕阅读器专用隐藏（视觉隐藏但可读） */
.sr-only{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important}

/* 降低动效偏好：减少或移除动画以提升舒适度 */
@media (prefers-reduced-motion: reduce) {
  #overlay-root { transition: none !important; transform: none !important; opacity: 1 !important; }
  #overlay-root.closing { opacity: 0 !important; transform: none !important; transition: none !important; }
  .icon-btn, #close-btn { transition: none !important; }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:transparent;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:14px;scrollbar-width:none}
html::-webkit-scrollbar, body::-webkit-scrollbar{width:0;height:0}

/* 覆盖左右（全宽） */
#overlay-root{
  width:100vw;
  max-width:100vw;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:hidden;
  padding-bottom:max(0px, env(safe-area-inset-bottom));
  /* entrance animation */
  transform:translateY(-8px);
  opacity:0;
  transition:transform .22s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
  will-change:transform, opacity;
}

#overlay-root.mounted{ transform:none; opacity:1; }

/* 退出动效：与入场对称的上移+淡出 */
#overlay-root.closing{
  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition-duration:.18s;
}

/* 顶部拖拽栏（与 AssistantPanel 风格接近） */
#drag-bar{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 12px;
  background:#f8fafc;
  border-bottom:1px solid var(--border);
  cursor:move;-webkit-app-region:drag
}
#drag-bar .no-drag{ -webkit-app-region: no-drag; cursor: default; }
#drag-bar .title{font-weight:600;color:#111827}
/* visual grip */
#drag-bar .grip{width:36px;height:4px;border-radius:999px;background:#cbd5e1;opacity:.9}
#drag-bar .grip:hover{opacity:1}

/* enlarged close button hit area */
#close-btn{
  background:transparent;border:0;color:#9ca3af;font-size:18px;line-height:1;
  cursor:pointer;padding:8px;border-radius:10px;min-width:48px;min-height:48px;
}
#close-btn:hover{background:#f3f4f6;color:#ef4444}
#close-btn:active{transform:translateY(1px)}
#close-btn:focus-visible{outline:2px solid rgba(102,126,234,.45);outline-offset:2px}

/* 顶部栏：Tabs + 徽章 */
#topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:6px 12px 0;border-bottom:1px solid var(--border);background:linear-gradient(180deg,#f6f9ff 0%, rgba(246,249,255,0) 85%)}

/* 顶部一级分类：Tab 风格 */
#tabs-row{
  display:flex;gap:12px;align-items:center;
  padding:6px 0 0;
  overflow-x:auto;scrollbar-width:none;
}
.h-scroll::-webkit-scrollbar{height:0;width:0}
.h-scroll::-webkit-scrollbar-thumb{background:transparent}
/* 默认 chip 样式（作为基础） */
.chip{background:#ffffff;border:1px solid var(--border);color:#374151;border-radius:999px;padding:5px 8px;cursor:pointer;font-size:12px;white-space:nowrap}
.chip:hover{background:#f9fafb}
/* Tab 外观覆盖 */
#tabs-row .chip{
  background:transparent;border:0;border-radius:0;
  padding:8px 3px;margin:0 3px;
  font-size:14px;font-weight:600;color:var(--muted);
  position:relative;
}
#tabs-row .chip.active{
  color: #111827;
  font-weight: 600;
  background: linear-gradient(180deg, #f0f4ff 0%, #e6ebff 100%);
  border-color: #c7d2fe;
}

#tabs-row .chip.active::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background: linear-gradient(90deg, #8ab4ff 0%, #c29bff 100%);
  border-radius: 2px;
}

/* 标题右侧动作区域（模型下拉） */
#title-actions{display:flex;align-items:center;gap:8px;position:relative}
#model-select{height:28px;padding:3px 8px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);font-size:12px;box-shadow:0 1px 2px rgba(17,24,39,.04)}
#model-trigger{height:28px;padding:3px 8px;border:1px solid var(--border);border-radius:6px;background:#fff;color:var(--text);font-size:12px;box-shadow:0 1px 2px rgba(17,24,39,.04);cursor:pointer;max-width:40vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#model-trigger:focus-visible{outline:2px solid rgba(102,126,234,.35);border-color:var(--primary)}
#model-menu{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:160px;max-width:70vw;max-height:240px;overflow:auto;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 10px 24px rgba(0,0,0,.14);z-index:1000;padding:4px}
.model-item{padding:6px 8px;border-radius:6px;cursor:pointer;font-size:12px;color:var(--text)}
.model-item:hover{background:#f3f4f6}
.model-item.active{background:#eef2ff;border:1px solid #c7d2fe}
#model-select:focus{outline:2px solid rgba(102,126,234,.35);border-color:var(--primary)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#credit-badge{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:20px;padding:0 8px;border-radius:999px;background:linear-gradient(135deg,#eef3ff,#f2eefe);color:#5b6abf;font-weight:700;font-size:12px;border:1px solid #e6e8f7;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

button {
  transition: all 0.2s ease-in-out;
}

/* Icon-only buttons (accessible size) */
.icon-btn{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;border:1px solid var(--border);background:#fff;cursor:pointer}
.icon-btn:active{transform:translateY(1px)}
.icon-btn:focus-visible{outline:2px solid rgba(102,126,234,.45);outline-offset:2px}
.icon-btn.primary{border:0;background:linear-gradient(135deg,#9bb5ff 0%, #9a8cff 45%, #77bbff 100%);box-shadow:0 4px 14px rgba(102,126,234,.35)}
.icon-btn::before{content:"";display:block;width:18px;height:18px;background:#4b5563;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-size:contain;mask-repeat:no-repeat;mask-position:center}

/* 禁用状态样式 */
.icon-btn:disabled,
#send-btn:disabled{
  opacity:.55;
  filter:grayscale(20%);
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}

/* Ripple 基础样式（轻量、纯CSS动画） */
.icon-btn, #close-btn { position: relative; overflow: hidden; }
.ripple-ink { position:absolute; border-radius:50%; background: rgba(0,0,0,.12); transform: scale(0); animation: ripple .6s ease-out; pointer-events: none; }
@keyframes ripple { to { transform: scale(1); opacity: 0; } }

/* SVG masks for icons (send, paste, shuffle, generate) */
.i-send::before{background:#fff;-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M2 21l21-9L2 3v7l15 2-15 2v7z"/></svg>')}
.i-paste::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M19 4h-3.18A3 3 0 0013 2H9a3 3 0 00-2.82 2H3a1 1 0 000 2h1v13a2 2 0 002 2h12a2 2 0 002-2V6h1a1 1 0 000-2h-2zM9 4h4a1 1 0 110 2H9a1 1 0 110-2zm10 15H6V6h2v1a1 1 0 001 1h6a1 1 0 001-1V6h2v13z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M19 4h-3.18A3 3 0 0013 2H9a3 3 0 00-2.82 2H3a1 1 0 000 2h1v13a2 2 0 002 2h12a2 2 0 002-2V6h1a1 1 0 000-2h-2zM9 4h4a1 1 0 110 2H9a1 1 0 110-2zm10 15H6V6h2v1a1 1 0 001 1h6a1 1 0 001-1V6h2v13z"/></svg>')}
.i-shuffle::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M16 3l3 3-3 3V7H6a3 3 0 00-3 3v1h2v-1a1 1 0 011-1h10V3zm3 11l-3 3v-2H9a1 1 0 01-1-1V9H6v5a3 3 0 003 3h7v2l3-3z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M16 3l3 3-3 3V7H6a3 3 0 00-3 3v1h2v-1a1 1 0 011-1h10V3zm3 11l-3 3v-2H9a1 1 0 01-1-1V9H6v5a3 3 0 003 3h7v2l3-3z"/></svg>')}
.i-generate::before{-webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2l1.8 4.6L18 8l-4.2 1.4L12 14l-1.8-4.6L6 8l4.2-1.4L12 2zm6 10l1.2 3 3 1.2-3 1.2L18 20l-1.2-2.6L14 16.2l2.8-1.2L18 12zM4 12l1 2.4 2.4 1L5 16.4 4 19l-1-2.6-2.4-1L3 14.4 4 12z"/></svg>');mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23000"><path d="M12 2l1.8 4.6L18 8l-4.2 1.4L12 14l-1.8-4.6L6 8l4.2-1.4L12 2zm6 10l1.2 3 3 1.2-3 1.2L18 20l-1.2-2.6L14 16.2l2.8-1.2L18 12zM4 12l1 2.4 2.4 1L5 16.4 4 19l-1-2.6-2.4-1L3 14.4 4 12z"/></svg>')}

/* 次级分类行（卡片） */
#subcat-row{display:flex;gap:4px;padding:4px;overflow-x:auto;scrollbar-width:none;content-visibility:auto;contain-intrinsic-size:80px}
.subcard{position:relative;flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start;width:80px;min-height:30px;background:#fff;border:1px solid var(--border);border-radius:6px;padding:4px 6px 10px;box-shadow:0 2px 6px rgba(17,24,39,.05); transition: all 0.2s ease-in-out;}
.subcard.active{outline:2px solid rgba(102,126,234,.25)}
.subcard .head{display:flex;align-items:center;gap:4px}
.subcard .icon{width:14px;height:14px;border-radius:999px;background:#fff;display:flex;align-items:center;justify-content:center}
.subcard .title{font-weight:500;color:#0f172a;font-size:10px}
.subcard .desc{font-size:9px;color:#6b7280;margin-top:1px}
.subcard .cta{position:absolute;right:4px;bottom:4px;width:15px;height:15px;display:inline-flex;align-items:center;justify-content:center;border-radius:4px;border:1px solid var(--border);background:#fff;cursor:pointer;display:none}

/* list 模式（纵向条目） */
.list-item{flex:0 0 auto;display:block;width:100%;background:#fff;border:1px solid var(--border);border-radius:5px;padding:4px 6px;color:var(--text);box-shadow:0 2px 6px rgba(17,24,39,.04);font-size:11px}
.list-item:hover{background:#f9fafb}

/* grid 模式 */
#subcat-row.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(60px,1fr));gap:4px;overflow-y:auto;overflow-x:hidden}
.grid-item{background:#fff;border:1px solid var(--border);border-radius:5px;padding:4px;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;word-break:break-word;box-shadow:0 2px 6px rgba(17,24,39,.04)}
.grid-item:hover{background:#f9fafb}
/* 尺寸：s/m/l 通过行列跨度控制 */
.grid-item.s{grid-column:span 1;grid-row:span 1;font-size:9px;min-height:40px}
.grid-item.m{grid-column:span 1;grid-row:span 1;font-size:11px;min-height:50px}
.grid-item.l{grid-column:span 2;grid-row:span 2;font-size:12px;min-height:100px}

/* 候选列表 */
#candidates{display:flex;flex-direction:column;gap:3px;padding:3px 6px 6px;max-height:200px;overflow:auto;scrollbar-width:none;content-visibility:auto;contain-intrinsic-size:120px}
#candidates::-webkit-scrollbar{width:0;height:0}
@media (prefers-color-scheme: dark) {
  #close-btn:hover{background:#1f2430;color:#ffb4b4}
  .ripple-ink{ background: rgba(255,255,255,.18); }
  .h-scroll::-webkit-scrollbar-thumb{background:#2a2d34}
  .chip{background:#1a1d24;border:1px solid var(--border);color:#e5e7eb}
  .chip:hover{background:#1f232b}
  #tabs-row .chip{background:transparent;border:0;color:#9aa0a6}
  #tabs-row .chip.active{color:#e5e7eb; background: linear-gradient(180deg, #1a1d24 0%, #14161a 100%); border-color: #24262b;}
  #model-select{background:#1a1d24;border-color:var(--border);color:var(--text)}
  #model-trigger{background:#1a1d24;border-color:var(--border);color:var(--text)}
  #model-menu{background:#1a1d24;border-color:var(--border);box-shadow:0 10px 24px rgba(0,0,0,.45)}
  .model-item:hover{background:#1f2430}
  .model-item.active{background:#1a1d24;border-color:#3b3f4a}
  #input{background:#1a1d24;border-color:var(--border);color:var(--text)}
  button{background:#1a1d24;color:var(--text)}
  button.primary{background:linear-gradient(135deg,#5a6fff,#5f58ff);box-shadow:0 4px 14px rgba(90,111,255,.35)}
  .candidate{background:#1a1d24}
  .candidate.copied{border-color:#14532d;background:#0a1711}
  .subcard{background:#1a1d24;border-color:var(--border)}
  
  /* 暗色模式下的按钮样式调整 */
  .btns button {
    background: #1a1d24;
    border-color: var(--border);
  }
}

/* 安全区域 */
@supports (padding:max(0px)){
  #overlay-root{padding-bottom:max(0px, env(safe-area-inset-bottom))}
}

#input-row {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  padding: 4px 8px;
}

#input {
  flex: 1;
  min-height: 60px;
  max-height: 120px;
  padding: 4px 8px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  resize: none;
  box-shadow: 0 2px 6px rgba(17, 24, 39, 0.04);
}

#input:focus {
  outline: 2px solid rgba(102, 126, 234, 0.25);
  border-color: var(--primary);
}

.btns {
  display: flex;
  flex-direction: row;
  gap: 2px;
}

/* ensure icon buttons stay accessible in size (override any later reductions) */
.icon-btn { width:36px; height:36px; }
.icon-btn::before { width:18px; height:18px; }

.candidate{display:flex;align-items:flex-start;justify-content:space-between;gap:3px;background:#fff;border:1px solid var(--border);border-radius:4px;padding:3px 5px;transition:background .2s,border-color .2s}
